
#wrap{
   
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
           flex-flow: column;
}
#main{
    -webkit-box-flex: 1; 
    -webkit-flex: 1;
    flex: 1;
}
#header .header{
    display: none;
}
#header .active{
    display: block;
}

#nav {

    background-color: #ffffff;
    
    position: fixed;
    bottom: 0px;
    left: 0px;
}
#nav ul{

     display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
#nav ul li{
    position: relative;
    -webkit-box-flex: 1.0; 
    -webkit-flex: 1.0;
    flex:1.0;
    width: 20%;
    -moz-box-flex:1.0; /* Firefox */

}
#nav ul li i{
    position: absolute;
    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius:10px;
    background-color: #FF0000;
    font-size: 12px;
    top: 1px;
    right:10px;
    color: #fff;
}
i#message_icon{
	position: absolute;
	right: 3px;
	top:3px;
	background: url(../image/message_icon.png) no-repeat center center;
	background-size: 20px;
	width: 20px;
	height: 20px;
}